<template>
    <div class="share page">
        <div class="con">

            <div class="panel">

                <div class="user">
                    <img :src="user.avatar" alt="" class="avatar">
                    <div class="info">
                        <span class="name">{{user.name}}</span>
                        <span class="mobile">{{user.mobile}}</span>
                    </div>
                </div>

                <div class="qr">
                    <img :src="code" alt="" class="qr-img">
               <!--     <img src="./qrcode.png" alt="" class="logo">-->
                </div>

<!--                <p @click="change" class="title" style="color: red">点击切换成{{text}}</p>-->
            </div>


        </div>
    </div>
</template>

<script>
    import {info} from "../../api/user";
    import {getQrCode} from "../../api/user";

    export default {
        name: "index",
        created(){
            getQrCode().then(res => {
                let QRCode = require('qrcode')
                QRCode.toDataURL(res.data, {type:'terminal'}, (err, url)=> {
                    this.wxQrCode = url
                })
            })
            info().then(res=>{
                this.user= res.data
                    let url =  process.env.VUE_APP_PATH + '/my?'+process.env.VUE_APP_TOP_USER_ID+'='+this.user.id
                    let QRCode = require('qrcode')
                    QRCode.toDataURL(url, {type:'terminal'}, (err, url)=> {
                        this.qrCode = url
                    })
            })

        },
        methods:{
          change(){
                this.wxType = !this.wxType
          }
        },
        computed:{
          code(){
              if(!this.wxType){
                  return this.qrCode
              }else {
                  return  this.wxQrCode
              }
          }  ,
          text(){
              if(this.wxType){
                  return '先注册模式'
              }else {
                  return  '先关注模式'
              }
          }
        },
        data(){
            return {
                user:{
                    avatar:"",
                    name:"",
                    mobile:""
                },
                qrCode:null,
                wxQrCode:null,
                wxType: process.env.VUE_APP_NAME == 'wg'
            }
        }
    }
</script>

<style scoped lang="stylus">
    .share
        background url("~@/assets/hbg.png") no-repeat $page-bg
        background-size 100% auto
        z-index 2
        height 100%
        .con
            padding 20px 10px 0
            .panel
                padding 25px 0
                width 100%
                background-color white
                border-radius 10px
                .user
                    font-size 0
                    height 70px
                    display flex
                    align-items center
                    .avatar
                        width 48px
                        height 48px
                        flex 0 0 48px
                        margin 0 15px 0 22px
                        border-radius 50%
                    .info
                        flex 1
                        display flex
                        flex-direction column
                        justify-content center
                        height 100%
                        padding 5px 0
                        .name
                            font-size:18px;
                            font-family:PingFang SC;
                            font-weight:400;
                            color:rgba(78,61,7,1);
                            margin-bottom 8px
                        .mobile
                            font-size:12px;
                            font-family:PingFang SC;
                            font-weight:400;
                            color:rgba(161,161,161,1);
                .qr
                    margin 10px 0
                    display flex
                    align-items center
                    justify-content center
                    position relative
                    .qr-img
                        width 215px
                        height 215px
                    .logo
                        width 215px
                        height 215px
                        position: absolute
                        left 50%
                        top 50%
                        transform translate(-50%, -50%)
                        z-index 999
                .title
                    padding 20px 0
                    text-align center
                    font-size:14px;
                    font-family:PingFang SC;
                    font-weight:400;
                    color:rgba(111,111,111,1);





</style>
